/*
 * @Author: Yejing
 * @Date: 2023-06-10 10:31:18
 * @LastEditors: Yejing
 * @LastEditTime: 2023-06-10 10:31:18
 * @Description: desc
 */
<template>
	<view class="storeOfInterest-page">

		<!-- 头部 -->
		<c-navigation-bar :title="search.title" :navType='search.navType' :navPlaceholder='search.navPlaceholder'
			:navThmen='search.navThmen' @focusEvent='focusEvent' @switchSvgEvent='switchSvgEvent'>
		</c-navigation-bar>
		<!-- 消息列表 -->
		<view class="container-box ">
			<view class="FollowersBox" v-for="(item,index) in FollowersList" :key="index" @click="details(item.type)">
				<view class="iconBox">
					<u-image :src="item.img" width="52" height="52"></u-image>
				</view>
				<view class="Followers">
					<view class="">
						<view class="FollowersType">
							{{item.name}}
						</view>
						<view class="FollowersTime">
							{{item.Followers}} Followers
						</view>
					</view>
					<view class="FollowersBtn" @click="modifyClick">
						{{$t('storeOfInterest.Cancel')}}
					</view>


				</view>
			</view>
		</view>
		<!-- 模态框 -->
		<modal :show='modal.show' :content='modal.content' @confirmClick='confirmClick' @cancelClick='cancelClick'>
		</modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//搜索
				search: {
					navThmen: 'line',
					navPlaceholder: 'Donate for',
					navType: 'navBackTitle',
					title: this.$t('storeOfInterest.Fllowed stores')
				},
				FollowersList: [{
						name: 'MLB',
						Followers: '377.2K',
					},
					{
						name: 'MLB',
						Followers: '377.2K',
					},
					{
						name: 'MLB',
						Followers: '377.2K',
					},
				],
				modal: {
					show: false,
					content: this.$t('storeOfInterest.unfollow')
				},

			}
		},
		onLoad() {},
		methods: {
			details(type) {
				// uni.navigateTo({
				// 	url: "/pages/storeOfInterestDetails/storeOfInterestDetails?type=" + type,
				// });
			},
			modifyClick() {
				this.modal.show = true
			},
		
					
			confirmClick(){
							this.modal.show = false
			},
				
			cancelClick() {
				this.modal.show = false
			}

		}
	}
</script>

<style lang="scss">
	.storeOfInterest-page {
		.FollowersBox {
			margin: 34rpx 0;
			height: 172rpx;
			display: flex;
			border-bottom: 2px solid #E8E6EA;

			.iconBox {
				margin: 20rpx;
				width: 116rpx;
				height: 116rpx;
				background: #F7F7F7;
				border-radius: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.Followers {
				flex: 1;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.FollowersType {
					height: 38rpx;
					font-size: 32rpx;
					font-family: SFUIDisplay-Medium, SFUIDisplay;
					font-weight: 500;
					color: #1B1D29;
					line-height: 38rpx
				}

				.FollowersTime {
					height: 24rpx;
					font-size: 20rpx;
					font-family: SFUIDisplay-Regular, SFUIDisplay;
					font-weight: 400;
					color: #999CAD;
					margin: 12rpx 0;
					line-height: 24rpx;
				}

				.FollowersBtn {
					width: 158rpx;
					height: 48rpx;
					border-radius: 12rpx;
					border: 2rpx solid #2934D0;
					font-size: 28rpx;
					font-family: SFUIDisplay-Regular, SFUIDisplay;
					font-weight: 400;
					color: #2934D0;
					text-align: center;
					line-height: 40rpx;
				}

			}
		}





	}
</style>
